<!DOCTYPE html>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
<link rel="stylesheet" href="../js/easyui/themes/icon.css" />

<!--引入jquery的ztree-->
<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script>
<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" />
<html>

	<head>
		<meta charset="UTF-8">
		<title>消息窗口messager</title>
	</head>

	<script>
		$(function() {
			$("#btn").click(function() {
				if($("#myform").form("validate")) {
					$("#myform").submit();
				} else {
					$.messager.alert("警告", "当前表单出现校验异常！", "warning");
				}
			})

			// 自定义校验规则
			$.extend($.fn.validatebox.defaults.rules, {

				minLength: {

					validator: function(value, param) {
						//alert(value+"    "+param);
						return value.length >= param[0];
					},

					message: '请至少输入 {0} 字符.'

				}

			});

		})
	</script>

	<body>
		<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">保存</a>

		<form id="myform" action="http://www.itcast.cn" method="post">
			基本校验：<input id="pwd" class="easyui-validatebox" data-options="required:true" /> <br> 邮箱验证：
			<input type="text" name="email" class="easyui-validatebox" validtype="email" required="true" missingMessage="不能为空" invalidMessage="邮箱格式不正确" /><br/>   网址验证：
			<input type="text" name="url" class="easyui-validatebox" validtype="url" required="true" missingMessage="不能为空" /><br/>   长度验证：
			<input type="text" name="length" class="easyui-validatebox" validtype="length[8,20]" required="true" missingMessage="不能为空" invalidMessage="有效长度8-20" /><br/>   远程验证：
			<input type="text" name="remote" class="easyui-validatebox" validtype="remote['../standard_validate.action','name']" required="true" missingMessage="不能为空" invalidMessage="用户名已存在" /><br/>  自定义校验规则：
			<input class="easyui-validatebox" data-options="validType:'minLength[5]'"><br> 数字框：
			<input type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2"></input><br> 日期框：
			<input id="dd" type="text" class="easyui-datebox" required="required"></input> <br> 下拉框：
			<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">

				<option value="aa">aitem1</option>

				<option>bitem2</option>

				<option>bitem3</option>

				<option>ditem4</option>

				<option>eitem5</option>

			</select>
			<br>

		</form>

	</body>

</html>